<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/initialize.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/public.css"/>
		<script src="__PUBLIC__/midi/js/jquery-2.2.3 (1).js"></script>
		<script src="__PUBLIC__/midi/js/public.js"></script>
		<script src="__PUBLIC__/midi/js/swiper-3.4.2.jquery.min.js"></script>
		<style>
			.wrapper{
				width: 1200px;
				margin: 0 auto;
			}
			aside{
				width: 256px;
				height: 576px;
				background-color: #f6f6f6;
				border: 1px solid #d1d1d1;
				border-top-left-radius: 10px;
				border-bottom-left-radius: 10px;
				float: left;
			}
			aside .con{
				padding-top: 64px;
				padding-left: 80px;
			}
			aside .con .title{
				display: -webkit-flex;
				margin-bottom: 16px;
			}
			aside .con .title h2{
				font-size: 18px;
				color: #29D0C9;
				margin-right: 14px;
			}
			aside .con .title input{
				margin-top: 5px;
			}
			aside .con .title span{
				margin-top: 11px;
				width: 77px;
				height: 1px;
				background-color: #d1d1d1;
			}
			aside ul li a{
				font-size: 16px;
				padding-left: 18px;
			}
			aside .first{
				position: relative;
				height: 72px;
				margin-bottom: 26px;
			}
			aside .first li{
				width: 162px;
				height: 36px;
				line-height: 36px;
				position: absolute;
				right: 0;
				border-top-left-radius: 20px;
				border-bottom-left-radius: 20px;
			}
			aside .first li:last-child{
				top: 36px;
			}
			aside .con .two{
				position: relative;
			}
			aside .con .two li{
				width: 162px;
				height: 36px;
				line-height: 36px;
				position: absolute;
				right: 0;
				border-top-left-radius: 20px;
				border-bottom-left-radius: 20px;
			}
			.wrapper .content{
				width: 902px;
				padding-left: 40px;
				float: left;
			}
			.wrapper .content .hd{
				margin-bottom: 58px;
			}
			.wrapper .content .hd h2{
				padding: 24px 0;
				border-bottom: 2px solid #d1d1d1;
				font-size: 22px;
				font-weight: bold;
			}
			.userinfo{
				margin-left: 176px;
			}
			.userinfo dl{
				margin-bottom: 20px;
			}
			.userinfo dt{
				float: left;
				width: 69px;
				text-align: right;
				font-size: 17px;
				color: #777777;
				padding-right: 54px;
				padding-top: 12.5px;
			}
			.userinfo dd{
				float: left;
			}
			.userinfo dd input[type="text"]{
				width: 392px;
				height: 44px;
				outline: none;
				border: 1px solid #d1d1d1;
			}
			.userinfo dl .icon{
				width: 80px;
				height: 80px;
				display: inline-block;
				border: 1px solid #d1d1d1;
				background-color: #f6f6f6;
				margin-right: 8px;
				position: relative;
			}
			.userinfo dl .icon img{
				position: absolute;
				top: 50%;
				margin-top: -13.5px;
				left: 50%;
				margin-left: -13.5px;
			}
			.userinfo dl .zenjia img{
				position: absolute;
				top: 50%;
				margin-top: -7.5px;
				left: 50%;
				margin-left: -7.5px;
				transform: scale(1.5);
			}
			.userinfo dl .zenjia{
				width: 60px;
				height: 60px;
				display: inline-block;
				border: 1px solid #d1d1d1;
				margin-bottom: 10px;
				position: relative;
			}
			.userinfo .cssradio{
				width: 12px;
				height: 12px;
				display: inline-block;
				line-height: 12px;
				vertical-align: middle;
				position: relative;
				margin-right: 10px;
				cursor: pointer;
				margin-top: -5px;
			}
			.userinfo dl dd label{
				font-size: 18px;
				margin-right: 6px;
			}
			.cssradio input[type="radio"]{
				position: absolute;
				opacity: 0;
				width: 12px;
				height: 12px;
			}
			.cssradio span{
				position: relative;
				width: 12px;
				height: 12px;
				display: inline-block;
				border: 1px solid #d1d1d1;
				border-radius: 50%;
				background-color: #fff;
			}
			.cssradio span:after{
				content: "";
				position: absolute;
				top: 3px;
				right: 3px;
				left: 3px;
				bottom: 3px;
				border-radius: 100%;
				background-color: #fff;
				opacity: 0;
				transition: all 0.5s ease-in-out;
				transform: scale(0);
			}
			.cssradio input:checked + span:after{
				opacity: 1;
				transform: scale(1);
				background-color: #29D0C9;
			}
			.userinfo .user-icon dt{
				padding-top:32px;
			}
			.userinfo .sex dt{
				padding-top: 0;
			}
			.userinfo button{
				width: 156px;
				height: 40px;
				font-size: 18px;
				background-color: #29D0C9;
				border-radius: 20px;
				color: #fff;
				margin-left: 123px;
				margin-top: 14px;
				border: 0;
				margin-bottom: 200px;
			}
		</style>
	</head>
	<body>
		<!--头部导航栏开始-->
		<include file="Public/header" />
		<!--头部导航栏结束-->
		<div class="shipin-datails">
			<div class="con">
				<div class="inner">
					<i></i>
				    <span>当前位置： 会员中心</span>
				</div>
			</div>
		</div>
	    <!--会员页的主要内容-->
	    <div class="wrapper">
	    	<aside>
	    	    <div class="con">
	    	    	<div class="title">
	    	    		<h2>个人中心</h2><input type="radio" /><span></span>
	    	    	</div>
	    	        <ul class="first">
	    	    	   <li><a href="vip.html">个人信息</a></li>
	    	    	   <li><a href="vip-gaimima.html">密码修改</a></li>
	    	        </ul>
	    	        <div class="title">
	    	        	<h2>系统信息</h2><input type="radio" /><span></span>
	    	        </div>
	    	        <ul class="two">
	    	    	  <li><a href="mytest.html">我的考试</a></li>
	    	       </ul>
	    	    </div>
	    	</aside>
	    	<div class="content">
	    		<div class="hd">
	    			<h2>个人信息</h2>
	    		</div>
	    	    <div class="userinfo">
	    	    	<form>
	    	    		<dl class="clearFix">
	    	    			<dt>昵称</dt>
	    	    			<dd><input type="text"/></dd>
	    	    		</dl>
	    	    		<dl class="clearFix user-icon">
	    	    			<dt>头像</dt>
	    	    			<dd><span class="icon"><img src="__PUBLIC__/midi/img/touxiang.png"/></span><span class="zenjia"><img src="__PUBLIC__/midi/mb-img/tianjiatupian.png"/></span></dd>
	    	    		</dl>
	    	    		<dl class="clearFix sex">
	    	    			<dt>性别</dt>
	    	    			<dd>
	    	    				<label>
	    	    					<span class="cssradio">
	    	    						<input type="radio" name="gender" value="1" checked="true"/>
	    	    						<span></span>
	    	    					</span>
	    	    					男
	    	    				</label>
	    	    				<label>
	    	    					<span class="cssradio">
	    	    						<input type="radio" name="gender" value="0" />
	    	    						<span></span>
	    	    					</span>
	    	    					女
	    	    				</label>
	    	    			</dd>
	    	    		</dl>
	    	    	    <dl class="clearFix">
	    	    			<dt>出生日期</dt>
	    	    			<dd><input type="text"/></dd>
	    	    		</dl>
	    	    		<dl class="clearFix">
	    	    			<dt>民族</dt>
	    	    			<dd><input type="text"/></dd>
	    	    		</dl>
	    	    		<dl class="clearFix">
	    	    			<dt>手机号</dt>
	    	    			<dd><input type="text"/></dd>
	    	    		</dl>
	    	    		<dl class="clearFix">
	    	    			<dt>邮箱</dt>
	    	    			<dd><input type="text"/></dd>
	    	    		</dl>
	    	    		<dl class="clearFix">
	    	    			<dt>身份证号</dt>
	    	    			<dd><input type="text"/></dd>
	    	    		</dl>
	    	    	    <button>修改</button>
	    	    	</form>
	    	    </div>
	    	</div>
	    </div>
	    <!--会员页的主要内容结束-->
	    <script>
	    	$(function(){
	    		$("aside ul li").hover(
	    			function(){
	    				$(this).css({'background-color':'#29d0c9'});
	    				$(this).find("a").css({'color':'#fff'});
	    			},
	    			function(){
	    				$(this).css({'background-color':'#f6f6f6'});
	    				$(this).find("a").css({'color':'#333'});
	    			}
	    		)
	    	})
	    </script>
	</body>
</html>
